<!--
 * @Author: ITDLCL
 * @Date: 2024-11-04 13:52:32
 * @LastEditors: ITDLCL
 * @Description:
-->
<!--我的 - 头部用户信息卡片-->
<template>
  <view class="user-info border-top border-bottom">
    <!--用户信息-->
    <view class="user-data d-flex">
      <view
        class="thumb bg-cover"
        :style="{
          backgroundImage:
            'url(' +
            (userData.headUrl
              ? userData.headUrl
              : 'https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/default_avatar.png') +
            ')',
        }"
        @click="emits('openPage', '/pages/personal/information', true)"
      ></view>
      <template v-if="isLogin">
        <view class="detail" @click="emits('openPage', '/pages/personal/information')">
          <view class="nickname d-flex siyuan-medium">
            {{ userData.nickname }}
            <image
              src="https://bac-miniprogram.oss-cn-beijing.aliyuncs.com/images/icon/edit_icon.png"
              mode="widthFix"
            ></image>
          </view>
          <!-- <label for="level" class="intel-one-mono-regular">Level.1</label>
          <label for="level">
            <text class="intel-one-mono-regular">2024-03-21</text>
            到期
          </label> -->
        </view>
        <label
          class="credit intel-one-mono-regular"
          @click="emits('openPage', '/pages/personal/credit',true)"
        >
          {{ userData.point }}
          <text>积分</text>
        </label>
      </template>
      <view
        class="show-login detail nickname siyuan-medium"
        v-else
        @click="emits('openPage', '', true)"
      >
        点击登录
      </view>
    </view>
    <!--活动报名&共享预约-->
    <view class="btns border-top d-flex">
      <label
        for="active"
        class="border-right"
        @click="emits('openPage', '/pages/activity/index', true)"
      >
        <text class="siyuan-medium">活动报名</text>
        <text class="intel-one-mono-medium">Application</text>
      </label>
      <label for="share" @click="emits('openPage', '/subscribe/index', true)">
        <text class="siyuan-medium">共享预约</text>
        <text class="intel-one-mono-medium">Reservation</text>
      </label>
    </view>
  </view>
</template>

<script setup>
let props = defineProps({
  isLogin: {
    type: Boolean,
    default: false,
  },
  userData: {
    type: Object,
    default: {},
  },
});

let emits = defineEmits(["openPage"]);
</script>

<style lang="scss" scoped>
.user-data {
  align-items: center;
  justify-content: space-between;
  .thumb {
    width: 202rpx;
    height: 202rpx;
  }
  .detail {
    flex: 1;
    padding-left: 66rpx;
    .nickname {
      margin-bottom: 44rpx;
	  align-items: center;
      font-size: 26rpx;
      image {
        width: 24rpx;
        margin-left: 16rpx;
      }
    }
    label {
      display: block;
      font-size: 20rpx;
    }
    label + label {
      margin-top: 10rpx;
    }
  }
  .credit {
    padding-right: 56rpx;
    font-size: 64rpx;
    text-align: center;
    text {
      display: block;
      font-size: 20rpx;
    }
  }
}
.user-info {
  background-color: #f2f2f2;
  .btns {
    label {
      padding: 70rpx 0 68rpx;
      flex: 1;
      text-align: center;
      font-size: 26rpx;
      text {
        display: block;
        line-height: 34rpx;
      }
    }
  }
}
.show-login {
  padding: 70rpx 0 0 66rpx;
  font-size: 36rpx;
  align-self: stretch;
  justify-self: center;
}
</style>
